<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="请输入公告标题" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
		</template>
		<el-table slot="table" :data="tableListData" height="100%" stripe>
			<el-table-column label="排序" width="54" align="center" prop="orderBy"></el-table-column>
			<el-table-column label="公告标题" prop="name" min-width="320"></el-table-column>
			<el-table-column label="公告作者" prop="author" min-width="100"></el-table-column>
			<el-table-column label="发布状态" min-width="100" align="center">
				<template slot-scope="{ row }">
					<el-switch v-model="row.isShow" active-value="0" inactive-value="1" @change="handleSwitchChange($event, row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="pudDate" label="发布时间" min-width="160"></el-table-column>
			<el-table-column label="操作" width="132">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { queryPageList, deleteNotice, updateNoticeStatus } from '@/api/basedata/sysNotice';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '通知公告'
		};
	},
	computed: {
		requestParams() {
			return { ...this.queryData, type: '1' };
		},
		listFunction() {
			return eval(queryPageList);
		},
		deleteFunction() {
			return eval(deleteNotice);
		},
		tableListData() {
			return this.tableData.map((item) => {
				return { ...item, name: item.title };
			});
		}
	},
	methods: {
		//更新通知公告状态
		async handleSwitchChange(status, data) {
			let params = { id: data.id, isShow: status };
			let result = await updateNoticeStatus(params).then((res) => res.data);
			if (result.code === '0') {
				if (status === '0') {
					this.$message.success('发布通知公告成功');
				} else if (status === '1') {
					this.$message.success('下架通知公告成功');
				}
				this.queryTableData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.banner_list_wrapper::v-deep {
	height: 100%;
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.el-scrollbar__view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 16px;
	}
	dl.item {
		width: 100%;
		dt {
			position: relative;
			padding-top: 31.25%;
			border-radius: 4px 4px 0 0;
			overflow: hidden;
		}
		dd {
			border: solid 1px #f2f6fc;
			border-radius: 0 0 4px 4px;
		}
		h2 {
			padding: 10px;
			font-size: 16px;
			font-weight: bold;
		}
		p {
			font-size: 14px;
			color: #606266;
			padding: 0 10px 10px;
		}
	}
	.el-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.el-button-group {
		display: flex;
		width: 100%;
		border-top: solid 1px #f2f6fc;
	}
	.el-button {
		flex: 1;
		border-left: solid 1px #f2f6fc;
		&:first-child {
			border-left: none;
		}
	}
}
</style>
